<template>
	<view>
		<view class="pure_top">
			<view class="pos_r pw100 ph100 plr30 pt30 bsb b-primary">
				<view class="flex_a">
					<view class="w120 h120 bf border-r50p" v-if="token && userInfo.phone">
						<!-- <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> -->
						<image :src="userInfo.head_img || '/static/default_avatar.png'" mode="widthFix"
							style="width: 120upx;"></image>
						<!-- </button> -->
					</view>
					<view class="w120 h120 bf border-r50p" v-else>
						<image :src="'/static/default_avatar.png'" mode="widthFix" style="width: 120upx;"></image>
					</view>
					<view class="flex1 flex_a pl10 cf" v-if="token && userInfo.phone">
						<view class="flex1">
							<view class="h60">{{ userInfo.nick_name }}</view>
							<!-- <view class="h60" v-if="showNick" @click="showNick = !showNick">{{ userInfo.nick_name }}</view>
              <view class="h60" v-else>
                <input type="nickname" class="weui-input" placeholder="请输入昵称" focus @blur="showNick = true" />
              </view> -->
							<view>账号：{{ userInfo.phone }}</view>
						</view>

						<view class="w60 h60" @click="routerLink({ path: '/pages/user/center/person' }, true)">
							<image src="/static/ic_bj_2x.png" mode="widthFix" style="width: 60upx;"></image>
						</view>
					</view>
					<view class="flex1 pl20 cf ft30" v-else @click="thirdLogin">未登录</view>
				</view>
			</view>
		</view>
		<view class="center_c plr30 c6">
			<!-- 我的钱包 -->
			<view class="mb30 bf border-r2 shadow">
				<view class="flex_sb h90 bdb plr40">
					<!-- <text>我的钱包</text> -->
					<view class="flex_a" @click="routerLink({ path: '/pages/user/wallet/index' }, true)">
						<text class="pr10 c9">进入钱包</text>
						<u-icon name="arrow-right" color="#999" size="26"></u-icon>

					</view>
				</view>
				<view class="flex_a h140 tac" v-if="token && userInfo.phone">
					<view class="displayss">
						<view class="flex1 bdr_f" @click="routerLink({ path: '/pages/user/wallet/index' }, true)">
							<view class="pb10 ft36">{{ ( list.balance + list.giveMoney ).toFixed(2) || '0.00' }}</view>
							<view class="ft26">可用余额(元)</view>
						</view>
						<!-- 	<view class="flex1 bdr_f">
							<view class="pb10 ft36">{{ list.carDeposit.toFixed(2) || '0.00' }}</view>
							<view class="ft26">车辆押金(元)</view>
						</view> -->
						<!-- 	<view class="flex1 bdr_f" @click="routerLink({ path: '/pages/user/wallet/depositDetail' })">
							<view class="pb10 ft36">{{ list.deposit.toFixed(2) || '0.00' }}</view>
							<view class="ft26">电池押金(元)</view>
						</view> -->
					</view>


				</view>
				<view class="flex_a h140 tac" v-else>
					<view class="flex1 bdr_f">
						<view class="pb10 ft36">--</view>
						<view class="ft26">可用余额(元)</view>
					</view>
					<!-- <view class="flex1 bdr_f">
						<view class="pb10 ft36">--</view>
						<view class="ft26">车辆押金(元)</view>
					</view>
					<view class="flex1 bdr_f">
						<view class="pb10 ft36">--</view>
						<view class="ft26">电池押金(元)</view>
					</view> -->
				</view>
			</view>
			<!-- 菜单栏 -->
			<view class="mb30 plr40 ptb30 bf border-r2 shadow">
				<view style="display: flex;justify-content: flex-start;flex-wrap: wrap;align-items: center;">
					<view v-for="(menu, index) in menuList" :key="index" style="width: 33%;">
						<view class="h170">
							<view
								style="display: flex;justify-content: space-around;align-items: center;flex-direction: column;"
								v-if="menu.name != '运维员' ? true : userInfo.yw_id ? true : false" @click="menuFn(menu)">
								<view class="flex_aj h90" :style="{ width: menu.iconSize.w + 'rpx' }">
									<image :src="menu.icon" mode="widthFix" :style="{ width: menu.iconSize.w + 'rpx' }">
									</image>
								</view>
								<text>{{ menu.name }}</text>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="plr100 mb30">
			<u-button type="primary" shape="circle" v-if="token && userInfo.phone" @click="logout">退出登录</u-button>
			<u-button type="primary" shape="circle" v-else @click="thirdLogin">点击登录</u-button>
		</view>
	</view>
</template>

<script>
	// 监听用户授权情况
	// let privacyHandler
	// wx.onNeedPrivacyAuthorization(resolve => {
	// 	console.log("触发：onNeedPrivacyAuthorization")
	// 	if (typeof privacyHandler === 'function') {
	// 		privacyHandler(resolve)
	// 	}
	// })

	import {
		logout,
		getUserInfo
	} from '@/api/user.js'
	export default {
		name: 'center',
		data() {
			return {
				userInfoss: [],
				list: {
					balance: 0, //可用余额
					giveMoney: 0, //赠送金额
					deposit: 0, //电池押金
					carDeposit: 0, //车辆押金
				},
				showNick: true,
				deviceId: '',
				menuList: [{
						name: '我的订单',
						path: '/pages/user/myOrder/index',
						icon: '/static/ic_zxwdd_2x.png',
						isLogin: true,
						iconSize: {
							w: '50'
						}
					},
					{
						name: '我的IC卡',
						path: '/pages/user/iccard/index',
						icon: '/static/ic_zxwdick_2x.png',
						isLogin: true,
						iconSize: {
							w: '62'
						}
					},
					{
						name: '意见反馈',
						path: '/pages/user/feedBack/index',
						icon: '/static/ic_zxyjfk_2x.png',
						isLogin: true,
						iconSize: {
							w: '52'
						}
					},
					{
						name: '服务条款',
						path: '/pages/user/service/index',
						icon: '/static/ic_zxfwtk_2x.png',
						isLogin: false,
						iconSize: {
							w: '50'
						}
					},
					{
						name: '关于我们',
						path: '/pages/user/service/detail',
						query: {
							type: 6
						},
						icon: '/static/ic_zxgywm_2x.png',
						isLogin: false,
						iconSize: {
							w: '60'
						}
					},
					{
						name: '月卡套餐',
						path: '/pages/user/monthlyCard/index',
						icon: '/static/ic_zxyjfk_2x.png',
						isLogin: true,
						query: {
							deviceId: ''
						},
						iconSize: {
							w: '52'
						}
					},
					{
						name: '运维员',
						path: '/pages/main/admin',
						icon: '/static/ic_zxywy_2x.png',
						isLogin: true,
						iconSize: {
							w: '60'
						}
					}
				]
			}
		},


		onUnload() {
			console.log('页面卸载');
			// this.userInfo.phone = ''
		},
		computed: {
			token() {
				return this.$store.state.user.token
			},
			userInfo() {
				return this.$store.state.user.userInfo || {}
			},
		},
		watch: {
			//监听 username的值的变化
			//在形参列表中，第一个值是“变化后的新值”，第二个值是“变化前的旧值”
			"token"(newVal, oldVal) {
				console.log('新值', newVal, '旧值', oldVal);
				if (newVal) {
					this.$nextTick(function() {
						console.log('$nextTick');
						setTimeout(() => {
							this.moneyVent()
						}, 500)

					});
				}
			},


		},
		onLoad() {},
		onShow() {
			// 重启当前小程序
			// uni.restartMiniProgram({
			// 	path: 'map',
			// 	success: res => {
			// 		console.log("3333333", res)
			// 	},
			// 	complete: res => {
			// 		console.log("4666", res)
			// 	},
			// })
			this.deviceId = wx.getStorageSync('deviceId') || ''
			this.privacyHandler()
			if (this.token && this.userInfo.phone) {
				this.moneyVent()
			}
			this.moneyFn()
		},
		methods: {
			// 菜单按钮
			async menuFn(menu) {

				if (menu.name === '月卡套餐') {
					if (!this.deviceId) {
						this.toast('请先扫设备码')
						return false
					} else {
						menu.query.deviceId = this.deviceId
					}
				}
				this.routerLink({
					path: menu.path,
					query: menu.query
				}, menu.isLogin)
			},


			// 查询隐私授权情况  needAuthorization为false是授权了，或者是没设置隐私收集
			privacyHandler() {
				uni.getPrivacySetting({
					success: res => {
						console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
					},
				})
			},

			onChooseAvatar(e) {
				console.log(e.detail.avatarUrl)
			},
			buttonName() {
				console.log('1111111');
			},
			//更新钱包数据的方法封装
			moneyVent() {
				this.$store.dispatch('getUserInfo')
				this.userInfoss = this.userInfo.wallet
				this.list.balance = 0
				this.list.giveMoney = 0
				this.list.deposit = 0
				this.list.carDeposit = 0
				this.userInfoss.map((item) => {
					this.list.balance += item.balance
					this.list.giveMoney += item.giveMoney
					this.list.deposit += item.deposit
					this.list.carDeposit += item.carDeposit
				})
				console.log(this.list)
			},
			async moneyFn() {
				const res = await getUserInfo()
				wx.setStorageSync('wallet', res.data.wallet[0])
				if (res.data.wallet.length !== 0) {
					this.list.balance = res.data.wallet[0].balance
					this.list.giveMoney = res.data.wallet[0].giveMoney
					this.list.deposit = res.data.wallet[0].deposit
					this.list.carDeposit = res.data.wallet[0].carDeposit
				}

			},
			async logout() {
				console.log('123');
				let result = await this.confirm({
					content: '确定退出登录？'
				})
				if (result.confirm) {
					const res = await logout()
					this.$store.commit('login', '')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.displayss {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.pure_top {
		position: relative;
		width: 100%;
		height: 300upx;
		background-color: $primary;

		&::after {
			position: absolute;
			left: -10%;
			bottom: -25upx;
			z-index: -2;
			content: '';
			width: 120%;
			height: 100upx;
			border-radius: 0 0 50% 50%;
			background: $primary;
		}
	}

	.center_c {
		position: relative;
		top: -100upx;
		margin-bottom: 100upx;
	}
</style>